<template>
  <div class="tabs">
    <el-tag
    size="medium"
    v-for='(tag,index) in tags'
    :key='tag.name'
    :closable="tag.name!=='home'"
    :effect="$route.name===tag.name ?'dark':'plain'"
    @click='changeMenu(tag)'
    @close='handleCloose(tag,index)'
    >
    <!-- router可以理解为一个容器管理了一组route,
    而每一个route是进行当前ULR和组件的映射关系 -->
 <!-- closable不是home 就有xx  @close删除事件 -->
       {{tag.label}}
    </el-tag>
  </div>
</template>

<script>
// mapState()拿到tab里面的数据：数组
// mapMutations() 拿到tab里面的函数
import { mapState ,mapMutations} from 'vuex';
export default {
   name:'CommonTag',
   data(){
     return{

     }
   },
   computed:{
     ...mapState({
      //  拿到tab里面的数组
       tags:state =>state.tab.tabsList
     }),
   },
   methods:{
    //  函数注意放在methods
     ...mapMutations({
      //  close别名
        // 把tab的删掉数据的方法重命名
       close:'closeTag'
     }),
     changeMenu(tag){
      //  点击哪个 就跳转到哪个路由
       this.$router.push({name:tag.name})
     },
     handleCloose(tag,index){
        const length=this.tags.length-1
        // 调用tab.js方法 重命名方法名 已经删除了对应tag
        this.close(tag)
        // tags已经少了一项数据 index对应就是最后一项
        if(index===length){
          this.$router.push({
            // 跳转到前一个路由
            name:this.tags[index-1].name
          })
        }else{
          this.$router.push({
            // 从中间删 删掉中间之后 后面那个往前 index往前 跳转到后一个路由
            name:this.tags[index].name
          })
        }
     }
   }
}
</script>

<style lang='less' scoped>
  .tabs{
    padding: 20px;
    .el-tag{
      margin-left: 15px;
      cursor: pointer;
    }
  }
</style>